<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenDrawer, useVbenForm } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { grantDataScope } from '#/api/sys/role';

const record = ref();
const isSave = ref(false);
const [AuthDataForm, formApi] = useVbenForm({
  showDefaultActions: false,
  wrapperClass: 'grid-cols-12', // 24栅格,
  commonConfig: {
    formItemClass: 'col-span-12',
    labelWidth: 80,
  },
  schema: [
    {
      fieldName: 'id',
      label: '角色ID',
      component: 'Input',
      dependencies: {
        show: false,
        triggerFields: ['id'],
      },
    },
    {
      fieldName: 'name',
      label: '角色名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入角色名称',
        allowClear: true,
        disabled: true,
      },
      detailSpan: 12,
    },
    {
      fieldName: 'code',
      label: '唯一编码',
      component: 'Input',
      componentProps: {
        placeholder: '请输入唯一编码',
        allowClear: true,
        disabled: true,
      },
      detailSpan: 12,
    },
    {
      fieldName: 'dataScope',
      label: '数据范围',
      component: 'ApiDict',
      componentProps: {
        placeholder: '请选择数据范围',
        allowClear: true,
        code: 'sys_role_data_scope',
      },
      formItemClass: 'col-span-12',
      detailSpan: 12,
    },
    {
      fieldName: 'deptIdList',
      label: '数据权限',
      component: 'ApiTreeSelect',
      componentProps: (values) => {
        return {
          placeholder: '请选择数据权限',
          allowClear: true,
          api: '/sys/dept/tree',
          labelField: 'name',
          valueField: 'id',
          labelInValue: false,
          multiple: true,
          treeCheckable: true,
          maxTagCount: 1000,
          treeCheckStrictly: values.treeCheckStrictly !== 1,
        };
      },
      dependencies: {
        triggerFields: ['dataScope'],
        if({ dataScope }) {
          return dataScope === 2;
        },
      },
      formItemClass: 'col-span-8',
      detailSpan: 8,
    },
    {
      fieldName: 'treeCheckStrictly',
      label: '父子联动',
      component: 'ApiDict',
      defaultValue: 0,
      componentProps: {
        renderType: 'RadioGroup',
        allowClear: true,
        code: 'yes_no',
        isBtn: true,
      },
      formItemClass: 'col-span-4',
      detailSpan: 4,
      dependencies: {
        triggerFields: ['dataScope'],
        if({ dataScope }) {
          return dataScope === 2;
        },
      },
    },
  ],
});
const [Drawer, DrawerApi] = useVbenDrawer({
  destroyOnClose: true,
  onOpenChange(isOpen) {
    record.value = isOpen ? DrawerApi.getData()?.record : {};
    if (isOpen) {
      isSave.value = false;
      formApi.setValues({
        id: record.value.id,
        name: record.value.name,
        code: record.value.code,
        dataScope: record.value.dataScope,
        deptIdList: record.value.deptIdList || [],
      });
    } else {
      if (isSave.value) {
        DrawerApi.getData()?.gridApi?.reload();
      }
    }
  },
  async onConfirm() {
    DrawerApi.setState({
      loading: true,
      confirmLoading: true,
    });
    const values = await formApi.getValues();
    if (
      Array.isArray(values.deptIdList) &&
      values.deptIdList.length > 0 && // 判断deptIdList是否为普通数组[1,2,3]，还是对象数组，[{value:xx,label:xxx}]
      values.deptIdList[0].label !== undefined
    ) {
      values.deptIdList = values.deptIdList.map((item: any) => item.value);
    }
    grantDataScope(values)
      .then(() => {
        message.success('保存成功');
        isSave.value = true;
      })
      .finally(() => {
        DrawerApi.setState({
          loading: false,
          confirmLoading: false,
        });
      });
  },
});
defineExpose(DrawerApi);
</script>
<template>
  <div>
    <Drawer class="w-[60%]" :title="`【${record?.name}】数据权限`">
      <AuthDataForm />
    </Drawer>
  </div>
</template>
